<script setup>
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ref } from 'vue';
import { onMounted } from 'vue';
import massage from './message.vue'

let timer = null;
let modal = ref(null);
let studentUsername = ref('')
let routers = useRouter()

onMounted(async () => {
    let re = await axios.get('http://localhost:8080/student/getOne', {
        withCredentials: true
    })
    console.log(re.data.data.studentUsername);
    studentUsername.value = re.data.data.studentUsername
})

const logout = () => {
    axios({
        method: 'post',
        url: 'http://localhost:8080/student/logout',
        withCredentials: true
    }).then(function (response) {
        if (response.data.code == 1) {
            modal.value.show(response.data)
            timer = setTimeout(() => (
                routers.push('/')
            ), 1000);
        }
    })
    clearTimeout(timer);
}

const pushtoupdatapassword = () => {
    routers.push('/updatepassword')
}

</script>
<template>
    <div class="panel">
        <div class="title">
            <p>导航栏</p>
        </div>
        <ul>
            <li>欢迎您：{{ studentUsername }}</li>
            <li><button @click="pushtoupdatapassword">修改密码</button></li>
            <li><button @click="logout">退出登录</button></li>
        </ul>
    </div>
    <massage ref="modal" />
</template>

<style scoped>
.panel {
    width: 780px;
    height: 98%;
    background-color: #fdf9eb;
    margin: 5px;
}

.title {
    height: 30px;
    width: 100%;
    background-color: #dedede;
}

.title p {
    line-height: 30px;
    margin-left: 20px;
    color: #585858;
}

ul {
    display: flex;
    justify-content: end;
    margin-top: 10px;
    /* margin-right: 5px; */
    border-bottom: #e8d35e solid 1.5px;
    padding-bottom: 15px;
    padding-right: 5px;
}

li {
    display: block;
    padding: 10px;
    border-right: 2px solid #5381a2;
}

li button {
    background-color: transparent;
    border: none;

}
</style>